Changing attributes during motion

Rich animations involve changing the color or other attributes of a view. While MotionLayout can use a KeyAttribute to change any of the standard attributes listed in the previous task, you use a CustomAttribute to specify any other attribute.

A CustomAttribute can be used to set any value that has a setter. For example, you can set the backgroundColor on a View using a CustomAttribute. MotionLayout will use reflections to find the setter, then call it repeatedly to animate the view.

In this step, you will use a CustomAttribute to set the colorFilter attribute on the moon to build the animation shown below.

Defining custom attributes

1. To get started open xml/step6.xml which contains the same animation you built in the last step.
2. To make the moon change colors, add two KeyAttribute with a CustomAttribute in the KeyFrameSet at keyFrame="0", keyFrame="50" and keyFrame="100"

<!-- xml/step6.xml -->

<!-- TODO: Add Custom attributes here -->
<KeyAttribute
       app:framePosition="0"
       app:motionTarget="@id/moon">
   <CustomAttribute
           app:attributeName="colorFilter"
           app:customColorValue="#FFFFFF"
   />
</KeyAttribute>
<KeyAttribute
       app:framePosition="50"
       app:motionTarget="@id/moon">
   <CustomAttribute
           app:attributeName="colorFilter"
           app:customColorValue="#FFB612"
   />
</KeyAttribute>
<KeyAttribute
       app:framePosition="100"
       app:motionTarget="@id/moon">
   <CustomAttribute
           app:attributeName="colorFilter"
           app:customColorValue="#FFFFFF"
   />
</KeyAttribute>

You add a CustomAttribute inside a KeyAttribute. TheCustomAttribute will be applied at the framePosition specified by the KeyAttribute.

Inside the CustomAttribute you must specify an attributeName and one value to set.

• app:attributeName - the name of the setter that will be called by this custom attribute. In this example setColorFilter on Drawable will be called.
• app:custom*Value - A custom value of the type noted in the name, in this example the custom value is a color specified.

Custom values can have any of the following types:

• Color
• Integer
• Float
• String
• Dimension
• Boolean

Using this API, MotionLayout can animate anything that provides a setter on any view.

Custom views can be animated using a CustomAttribute.

As long as MotionLayout can find a setter that takes the correct type it can animate changes between values.

Try out the animation

1. Run the app again and go to Step 6 to see the animation in action. When you click on the moon, it'll follow the path from start to end – going through each KeyAttribute that was specified in the KeyFrameSet.

When you add more KeyFrames, MotionLayout changes the path of the moon from a straight line to a complex curve, adding a double backflip, resize, and a color change midway through the animation.

In real animations, you'll often animate several views at the same time controlling their motion along different paths and speeds. By specifying a different KeyFrame for each view, it's possible to choreograph rich animations that animate multiple views with MotionLayout.